<template>
	<view class="container">
		<view class="layout">
			<view class="box" v-for="(item,index) in arr" :key="item.id">
				<view class="pic">
					<image lazy-load class="item-image" :src="item.url" mode="widthFix" @click="onPreview(index)"></image>
				</view>
				<view class="text">
					{{item.id}}
				</view>
			</view>
		</view>
		<view class="fixed">
			<view class="item" @click="refresh">
				   <uni-icons type="refreshempty" size="26" color="#888"></uni-icons>
			</view>
			<view class="item" @click="stickyTop">
			   <uni-icons type="arrow-up" size="30"></uni-icons>
			</view>
			
		</view>

         <view class="load-more">
         	<uni-load-more status="loading"></uni-load-more>
         </view>
	</view>
	
</template>

<script setup>
	// import {uni-icons  } from '../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
	// 接收接口返回的数据
	const arr = ref([])
	
	// 点击图片查看预览效果
	function onPreview(index){
		console.log(index);
		let urls = arr.value.map(item=>item.url)
		uni.previewImage({
			current:index,
			urls
		})
	}
	
  // 请求接口
  async	function netWork(){
	  uni.showNavigationBarLoading()
	  try{
	  	const res = await uni.request({
	  			url:'https://api.thecatapi.com/v1/images/search',
	  			data:{
	  				limit:10
	  			}
	  		})
	  			console.log(res);
	  			arr.value = [...arr.value,...res.data]
	  }catch(e){
	  	//TODO handle the exception
	  }finally{
		  uni.stopPullDownRefresh();
		  uni.hideNavigationBarLoading()
	  }
  }

	netWork()
	
	// 触底加载更多
    onReachBottom((e)=>{
		netWork()
	})
	
	// 下拉刷新
	onPullDownRefresh(()=>{
		arr.value = []
		netWork()
	})
	
	// 手动刷新
	function refresh(){
		uni.startPullDownRefresh()
	}
	
	// 置顶
    function stickyTop(){
	uni.pageScrollTo({
		scrollTop:0,
		duration:100
	})
	}
</script>

<style lang="scss" scoped>
.container{
	.layout{
		padding: 50rpx;
		
		.box{
			margin-bottom: 60rpx;
			box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.8);
			border-radius: 15rpx ;
			overflow: hidden;
			box-sizing: border-box ;
			width: 100%;
			.pic{
				// width: 100%;
				.item-image{
					width: 100%;
				}
				.text{
					padding:30rpx
				}
			}
		}
	}
	
	.fixed{
		position: fixed;
		right: 30rpx;
		bottom: 80rpx;
		padding: env(safe-area-inset-bottom);
		.item{
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.9) ;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;
		}
	}
}
</style>
